<template>
    <div id="store-list">
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="storeName" size="mini" placeholder="输入门店名称查询" clearable @change="handleChangeSearch"></el-input>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-select class="select-prefix" size="mini" v-model="storeType" @change="handleChangeSearch" placeholder="请选则门店类型" clearable filterable>
                            <template slot = "prefix">
                                <span class = 'prefixSlot'>门店类型</span>
                            </template>
                            <el-option
                                v-for="item in $Options.storeTypes"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option> 
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content col_float_right">
                        <el-button type="primary" size="mini" @click="handleCreateStore">新建门店</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mg-t-10">
            <el-table :data="tableData" border stripe>
                <el-table-column label="门店名称" prop="storeName"></el-table-column>
                <el-table-column label="门店编码" prop="storeNo"></el-table-column>
                <el-table-column label="门店类型" prop="storeType" width="100">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.storeType == 0 ? 'success' : scope.row.storeType == 1 ? 'waring' : scope.row.storeType == 2 ? 'danger' : scope.row.storeType == 3 ? 'info' : ''  ">
                            {{scope.row.storeType == 0 ? '直营店' : scope.row.storeType == 1 ? '加盟店' : scope.row.storeType == 2 ? '合作店' : scope.row.storeType == 3 ? '会员店' : '--' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="联系人" prop="personName"></el-table-column>
                <el-table-column label="联系电话" prop="mobileNumber"></el-table-column>
                <el-table-column label="详细地址" prop="addressName" show-overflow-tooltip></el-table-column>
                <el-table-column label="创建时间" prop="gmtCreate" show-overflow-tooltip></el-table-column>
                <el-table-column label="修改时间" prop="gmtModified" show-overflow-tooltip></el-table-column>
                <el-table-column label="门店状态" prop="isLocked">
                    <template slot-scope="scope">
                        <el-tag size="small" :type="scope.row.isLocked == 0 ? 'success' : 'danger'">
                            {{scope.row.isLocked == 0 ? '启用' : '停用'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-dropdown size="small" type="text" trigger="click" placement="bottom-start">
                            <span class="el-dropdown-link" style="font-size: 12px; cursor: pointer">
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown" >
                                <el-dropdown-item  command="a" @click.native="handleEdit(scope.row)">编辑</el-dropdown-item> 
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <page v-if="total" :total="total" :page="page" :size="size" @handlepagechange="handlePageChange" @handleSizeChange="handleSizeChange"></page>
        </el-card>
        <storeTpl v-if="isShow" :isShow="isShow" :id="storeId" :expressAddressId="expressAddressId" :type="type" @cancelShow="cancelShow" @getStoreList="getStoreList"></storeTpl>
    </div>
</template>
<script>
import storeTpl from './storeTpl'
import page from '../../commonComponents/page'
export default {
    components: {storeTpl, page},
    data() {
        return {
            page: 1,
            size: 10,
            total: 0,
            tableData: [],
            isShow: false,
            type: 'add',
            storeId: '',
            storeName: '',
            storeType: 0,
            expressAddressId: ''
        }
    },
    mounted() {
        this.getStoreList()
    },
    methods: {
        getStoreList() {
            let params= {
                page: this.page,
                size: this.size,
                storeName: this.storeName,
                storeType: this.storeType == 0 ? '' : this.storeType
            }
            this.$server.storeWarehouseController.getStoreList(params).then(res => {
                this.tableData= res.data
                this.total= res.total
            })
        },
        handleCreateStore() {
            this.type= 'add'
            this.isShow= true
        },
        handleEdit(scope) {
            this.type= 'edit'
            this.storeId= scope.storeNo
            this.expressAddressId= scope.expressAddressId
            this.isShow= true
        },
        cancelShow(val) {
            this.isShow= val
        },
        handlePageChange(val) {
            this.page= val
            this.getStoreList()
        },
        handleSizeChange(val) {
            this.size= val
            this.getStoreList()
        },
        handleChangeSearch() {
            this.page= 1
            this.total= 0
            this.getStoreList()
        }


    }
}
</script>